import React from "react";
import ReactDOM from "react-dom"
import Footer from './components/Footer'
import Header from './components/Header'
import Main from './components/Main'

import './styles/base.css'
import './styles/index.css'

class Index extends React.Component {
    
    state = {
        list: [
            { id: 1, content: '吃饭', isDone: true },
            { id: 2, content: '睡觉', isDone: false },
            { id: 3, content: '打豆豆', isDone: false }
        ],
        // 有三个值  all  active  completed
        type: 'all'
    }
    toggleSelectAll = (isDone) => {
        const list = [...this.state.list]
        list.forEach(item=>item.isDone=isDone)
        this.setState({list})
    }
    changeType = (type) => {
        this.setState({ type })
    }
    updateDone = (idx) => {
        const list = [...this.state.list]
        list[idx].isDone = !list[idx].isDone
        this.setState({list})
    }
    
    add = (content) => {
        const list = [...this.state.list]
        list.unshift({id:Date.now(), content, isDone: false})
        this.setState({list})
    }
    del = (idx) => {
        const list = [...this.state.list]
        list.splice(idx,1)
        this.setState({list})
    }
    editTodo = (id, content) => {
        const list = [...this.state.list]
        const rs = list.findIndex(item=>item.id===id)
        if(rs>-1) {
            list[rs].content = content
        this.setState({list})

        }
    }
    render() {
        return (<section class="todoapp">
            <Header
             add={this.add}></Header>
            <Main
            updateDone={this.updateDone}
            del={this.del}
            editTodo={this.editTodo}
            type={this.state.type}
            toggleSelectAll={this.toggleSelectAll}
           
            list={this.state.list}></Main>
            <Footer changeType={this.changeType} list={this.state.list}></Footer>
        </section>) 
    }
}

ReactDOM.render(<Index/>, document.getElementById('root'))